import {defineStore} from 'pinia'
import {uuid} from "vue-uuid";

function getNextSelectedId(fe_id, componentList) {
    const visibleComponentList = componentList.filter(c => !c.isHidden)
    const index = visibleComponentList.findIndex(c => c.fe_id === fe_id)
    if (index < 0) return ''
    let newSelectedId = ''
    const length = visibleComponentList.length
    if (length <= 1) {
        newSelectedId = ''
    } else {
        if (index + 1 === length) {
            newSelectedId = visibleComponentList[index - 1].fe_id
        } else {
            newSelectedId = visibleComponentList[index + 1].fe_id
        }
        return newSelectedId
    }
}

function getPreSelectedId(fe_id, componentList) {
    const visibleComponentList = componentList.filter(c => !c.isHidden)
    const index = visibleComponentList.findIndex(c => c.fe_id === fe_id)
    if (index < 0) return ''
    let newSelectedId = ''
    const length = visibleComponentList.length
    if (length <= 1) {
        newSelectedId = ''
    } else {
        newSelectedId = visibleComponentList[index - 1]?.fe_id
        return newSelectedId
    }
}

const useQuestion = defineStore("question", {
    state: () => ({
        componentList: [],
        activeId: '',
        editActiveKey: '1',
        isLoading: false,
        copyData: {},
        questionData: {},
        snapshots: [],
        redoList: [],
        maxLimit: 20,
    }),
    getters: {
        activeIndex: (state) => {
            return state.componentList.findIndex(i => i.fe_id === state.activeId)
        },
        activeType: (state) => {
            let index = state.componentList.findIndex(i => i.fe_id === state.activeId)
            return state.componentList[index]?.type
        },
        activeData: (state) => {
            let index = state.componentList.findIndex(i => i.fe_id === state.activeId)
            return state.componentList[index]
        },
        isLocked(state) {
            return state.componentList[state.activeIndex]?.isLocked;
        },
        hiddenLength(state) {
            return state.componentList.filter((i) => {
                return !i.isHidden
            }).length
        },
        isCopy(state) {
            return !!Object.keys(state.copyData).length
        },
        isRevokeDisabled(state) {
            return state.snapshots.length === 0
        },
        isRedoDisabled(state) {
            return state.redoList.length === 0
        },
        isUpDisabled(state) {
            return state.activeIndex === 0
        },
        isDownDisabled(state) {
            return state.activeIndex === state.componentList.length - 1
        },
        chartsViewOptions(state) {
            if (state.componentList.length && state.activeIndex >= 0) {
                let obj = state.componentList[state.activeIndex]
                if (obj?.type === 'questionRadio') {
                    return obj.props.options
                } else if (obj?.type === 'questionCheckbox') {
                    return obj.props.list
                } else {
                    return []
                }
            }
        }
    },
    actions: {
        revoke() {
            if (!this.snapshots.length) return;
            let dos = this.snapshots.pop()
            this.redoList.push({
                type: dos.type,
                data: this.componentList,
                dos: dos,
                activeId: dos.activeId
            })
            if (this.redoList.length >= this.maxLimit) {
                this.redoList.shift();
            }
            if (dos.type === 'paste' || dos.type === 'add') {
                this.activeId = getPreSelectedId(this.activeId, this.componentList)
                this.componentList = dos.data
                return;
            } else if (dos.type === 'delete' || dos.type === 'hidden') {
                this.componentList = dos.data
                this.activeId = dos.activeId
                return;
            }
            this.componentList = dos.data
        },
        redo() {
            if (!this.redoList.length) return;
            let dos = this.redoList.pop()
            this.snapshots.push(dos.dos)
            if (this.snapshots.length >= this.maxLimit) {
                this.snapshots.shift();
            }
            if (dos.type === 'paste' || dos.type === 'add') {
                this.componentList = dos.data
                this.activeId = getNextSelectedId(this.activeId, this.componentList)
                return;
            } else if (dos.type === 'hidden' || dos.type === 'delete') {
                this.activeId = getNextSelectedId(dos.dos.activeId, this.componentList)
                this.componentList = dos.data
                return;
            }
            this.componentList = dos.data
        },
        addSnapshots(snapshot) {
            this.snapshots.push(snapshot)
            if (this.snapshots.length >= this.maxLimit) {
                this.snapshots.shift();
            }
        },
        changeId(id) {
            this.activeId = id
        },
        changeLoading(value) {
            this.isLoading = value
        },
        changeEditKey(key) {
            this.editActiveKey = key
        },
        deleteItem() {
            if (!this.componentList.length) return
            let index = this.activeIndex
            let id = this.componentList[index]?.fe_id
            const newSelectedId = getNextSelectedId(id, this.componentList)
            this.componentList.splice(index, 1)
            this.activeId = newSelectedId
        },
        lockItem() {
            if (!this.componentList.length) return;
            this.componentList[this.activeIndex].isLocked = !this.componentList[this.activeIndex].isLocked
        },
        hiddenItem(isHidden, fe_id = this.activeId) {
            let newSelectedId = ''
            if (isHidden) {
                newSelectedId = getNextSelectedId(fe_id, this.componentList)
            } else {
                newSelectedId = fe_id
            }
            this.activeId = newSelectedId
            const curComp = this.componentList.find(c => c.fe_id === fe_id)
            if (curComp) {
                curComp.isHidden = isHidden
            }
        },
        copyItem() {
            this.copyData = {
                ...this.activeData,
                "fe_id": uuid.v1(),
            }
        },
        pasteItem() {
            if (Object.keys(this.copyData).length) {
                this.copyData = {
                    ...this.copyData,
                    "fe_id": uuid.v1(),
                }
                this.componentList.splice(this.activeIndex + 1, 0, this.copyData)
                this.activeId = this.copyData.fe_id
            }
        },
        upItem() {
            this.componentList.splice(this.activeIndex - 1, 0, this.componentList.splice(this.activeIndex, 1)[0]);
        },
        downItem() {
            this.componentList.splice(this.activeIndex + 1, 0, this.componentList.splice(this.activeIndex, 1)[0]);
        },
        updateLock(index) {
            if (this.componentList.length > 0) {
                this.componentList[index].isLocked = !this.componentList[index].isLocked
            }
        },
    },
})
export default useQuestion
